<template>
  <div class="time_value">
    <ElForm
      :model="TimeValues"
      class="demo-ruleForm"
      label-position="left"
      ref="form"
      :rules="rules"
    >
      <ElFormItem label="活动预热期（C）">
        <ElDatePicker
          v-model="value1"
          type="daterange"
          align="left"
          start-placeholder="请选择日期时间"
          end-placeholder="请选择日期时间"
          :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
        >
        </ElDatePicker>
      </ElFormItem>
      <ElFormItem label=" 活动时间（C）" prop="value2" required>
        <ElDatePicker
          v-model="value2"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="new Date(2000, 1, 1, 12, 0, 0)"
        >
        </ElDatePicker>
        <span @click.prevent="submitForms('ruleForm')"></span>
      </ElFormItem>
    </ElForm>
  </div>
</template>
<script>
import { TimeValues, rules, form, submitForms } from "./FormInfo";
import { ElForm, ElFormItem, ElInput, ElDatePicker } from "element-plus";

export default {
  props: ["title"],
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElDatePicker,
  },

  setup() {
    return {
      TimeValues,
      rules,
      submitForms,
      form,
    };
  },
};
</script>
<style lang="scss">
.el-form-item__content {
  display: flex;
}
.el-input {
  width: 80%;
  margin-right: 10px;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 400px !important;
}
</style>